import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:concierge/app/widgets/ms_svg_icon.dart';

class StatusIndicator extends StatelessWidget {
  const StatusIndicator({
    super.key,
    this.status = -1,
    this.itemCount = 3,
    this.reverse = false,
  });
  final int status;
  final int itemCount;
  final bool reverse;

  @override
  Widget build(BuildContext context) {
    final colorScheme = context.theme.colorScheme;

    List<Color> colors = [
      colorScheme.error,
      colorScheme.tertiaryFixed,
      colorScheme.primaryFixed,
      colorScheme.secondaryFixed,
    ];
    List<String> names = [
      'blood_sugar_status_arrow_red',
      'blood_sugar_status_arrow_orange',
      'blood_sugar_status_arrow_blue',
      'blood_sugar_status_arrow_green',
    ];

    return SizedBox(
      height: 18.h,
      child: ListView.separated(
        padding: EdgeInsets.zero,
        shrinkWrap: true,
        reverse: reverse,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          Color color = colors[index];
          String name = names[index];
          BorderRadius borderRadius = BorderRadius.zero;
          bool isFirst = reverse ? index == itemCount - 1 : index == 0;
          bool isLast = reverse ? index == 0 : index == itemCount - 1;
          if (isFirst) {
            borderRadius = BorderRadius.only(
              topLeft: Radius.circular(12.r),
              bottomLeft: Radius.circular(12.r),
            );
          }
          if (isLast) {
            borderRadius = BorderRadius.only(
              topRight: Radius.circular(12.r),
              bottomRight: Radius.circular(12.r),
            );
          }
          return Stack(
            children: [
              Container(
                width: 24.w,
                height: 12.h,
                decoration: BoxDecoration(
                  color: color,
                  borderRadius: borderRadius,
                ),
              ),
              Visibility(
                visible: index == status,
                child: Positioned(
                  bottom: 0,
                  left: 6.w,
                  child: MSSvgIcon(name, size: 12.w, responsiveColor: false),
                ),
              ),
            ],
          );
        },
        separatorBuilder: (context, index) => SizedBox(width: 2.w),
        itemCount: itemCount,
      ),
    );
  }
}
